<template>
  <div class="page">
    <el-form ref="ruleFormRef" :model="form" label-width="120px" label-position="left">
      <el-form-item label="上传图片" size="small">
        <div class="imgGroup">
          <div class="imgWrap" v-for="(item, index) in form.template_list" :key="index">
            <el-image
              class="imgItem"
              :src="item.url"
              :initial-index="previewIndex"
              :preview-src-list="previewImgList"
              @show="previewClick(index)" />
            <el-icon class="removeBtn" size="20" color="red" @click.stop="removeImg(index)"><CircleClose /></el-icon>
          </div>

          <div class="imgWrap uploadWrap">
            <el-icon :size="60" color="#409EFF"><Plus /></el-icon>
            <input class="uploadInp" type="file" @change="uploadChange" name="img" ref="inpFile" accept="image/jpeg, image/png, image/gif, image/jpg" multiple>
          </div>
        </div>
      </el-form-item>

      <el-form-item>
        <el-button class="downloadBtn" type="primary" :disabled="disabledBtn" :loading="disabledBtn" @click="downloadClick(ruleFormRef)" v-if="form.template_list.length > 0">
          {{ disabledBtn?'转换中...':'点击下载' }}
        </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup>
import { waterMark } from "@/utils/water-mark";
import { reactive, ref, watchEffect } from 'vue'
const ruleFormRef = ref();

let inpFile = ref()
const disabledBtn = ref(false)
let previewImgList = ref([])
let previewIndex = ref(0);

const form = reactive({
  template_list: []
});

watchEffect(() => {
  previewImgList.value = form.template_list.map(item => item.url)
})

//change
async function uploadChange(file) {
  if(window.FileReader) {
    for(let i = 0; i < file.target.files.length; i++) {
      disabledBtn.value = true;
      let reader = new FileReader();
      reader.readAsDataURL(file.target.files[i]);
      reader.onloadend = async function(evt) {
        let markUrl = await waterMark(reader.result, 'https://shoss.ipangsell.com/pang-logo-title.png')
        form.template_list.push({
          name: file.target.files[i].name,
          url: markUrl.src
        });
        if(form.template_list.length === file.target.files.length) {
          disabledBtn.value = false;
        }
      }
    }
  }
}

//预览图片
function previewClick(e) {
  previewIndex.value = e
}

//删除
function removeImg(index) {
  form.template_list.splice(index, 1)
}

//下载
function downloadClick () {
  disabledBtn.value = true;
  form.template_list.forEach(item => {
    let alink = document.createElement("a");
    alink.href = item.url;
    const picName = `${item.name}`;//图片名
    alink.download = picName;
    alink.click();
  });
  disabledBtn.value = false;
}
</script>

<style scoped>
.page{
  padding: 20px 20px 0 20px;
}
.imgGroup{
  display: flex;
  flex-wrap: wrap;
}
.imgWrap{
  width: 100px;
  height: 100px;
  margin: 5px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, .12);
  position: relative;
}
.imgItem{
  width: 100%;
  height: 100%;
}
.uploadWrap{
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
.uploadInp{
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
  opacity: 0;
  cursor: pointer;
}
.downloadBtn{
  margin-top: 100px
}
.removeBtn{
  position: absolute;
  top: 3px;
  right: 3px;
  z-index: 10;
  cursor: pointer;
}
</style>
